<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery/jquery-1.12.4.min.js"></script>
<style>

</style>

<body>
    <ul class="list">
        <li>111</li>
        <li>222</li>
        <li class="item3">333</li>
        <li>444</li>
        <li>555</li>
    </ul>
    <script>
        /* 向当前匹配的所有元素内容的最后插入指定内容 */
        $('.list').append('<li>666</li>');
        $('<li>吉他小王子</li>').appendTo('.list');

        // 向所有元素内部开始处插入内容
        $('.list').prepend('<li>000</li>');
        $('<li>000111</li>').prependTo('.list');

        //向匹配的元素前面插入内容
        $('.item3').before('<li>大哥大</li>');
        // 向所匹配的元素后面插入内容
        $('.item3').after('<li>姚尚醒醒</li>');
        // 替换当前所匹配的标签
        $('.item3').replaceWith('<li>光明顶很光明！！</li>');

    </script>
</body>

</html>